<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="$t('ElectricityM')" left-arrow fixed @click-left="onClickLeft" />

    <van-form name="setElectricity" @submit="getPrice">
      <div class="electricityBox">
        <div class="addSiteType_box">
          <div class="electricityBox_l">Currency Type</div>
          <div class="addSiteType_box_r">
            <div class="addSite_siteType" @click="showPicker = true">{{currencyCode}}</div>
            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
              />
            </van-popup>
          </div>
        </div>
        <div class="addSiteType_box">
          <div class="electricityBox_l">FeedInTariff</div>
          <div class="electricity_timeBox">
            <van-field v-model="onGridPrices" clearable type="number" />
          </div>
        </div>
        <van-divider>Period1</van-divider>
        <div class="addSiteType_box">
          <div class="electricityBox_l">Start Time</div>
          <div class="electricity_timeBox" @click="showPicker2 = true">{{startTime1Val}}</div>
          <van-popup v-model="showPicker2" round position="bottom">
            <van-datetime-picker
              v-model="startTime1"
              type="time"
              @cancel="showPicker2 = false"
              @confirm="onConfirm2"
            />
          </van-popup>
        </div>
        <div class="addSiteType_box">
          <div class="electricityBox_l">End Time</div>
          <div class="electricity_timeBox" @click="showPicker3 = true">{{endTime1Val}}</div>
          <van-popup v-model="showPicker3" round position="bottom">
            <van-datetime-picker
              v-model="endTime1"
              type="time"
              @cancel="showPicker3 = false"
              @confirm="onConfirm3"
            />
          </van-popup>
        </div>
        <div class="addSiteType_box">
          <div class="electricityBox_l">Tariff</div>
          <div class="electricity_timeBox">
            <van-field v-model="onPeakPrice" clearable type="number" />
          </div>
        </div>
        <van-divider>Period2</van-divider>
        <div class="addSiteType_box">
          <div class="electricityBox_l">Start Time</div>
          <div class="electricity_timeBox" @click="showPicker4 = true">{{startTime2Val}}</div>
          <van-popup v-model="showPicker4" round position="bottom">
            <van-datetime-picker
              v-model="startTime2"
              type="time"
              @cancel="showPicker4 = false"
              @confirm="onConfirm4"
            />
          </van-popup>
        </div>
        <div class="addSiteType_box">
          <div class="electricityBox_l">End Time</div>
          <div class="electricity_timeBox" @click="showPicker5 = true">{{endTime2Val}}</div>
          <van-popup v-model="showPicker5" round position="bottom">
            <van-datetime-picker
              v-model="endTime2"
              type="time"
              @cancel="showPicker5 = false"
              @confirm="onConfirm5"
            />
          </van-popup>
        </div>
        <div class="addSiteType_box">
          <div class="electricityBox_l">Tariff</div>
          <div class="electricity_timeBox">
            <van-field v-model="offPeakPrice" clearable type="number" />
          </div>
        </div>
        <van-divider>Period3</van-divider>
        <div class="addSiteType_box">
          <div class="electricityBox_l">Start Time</div>
          <div class="electricity_timeBox" @click="showPicker6 = true">{{startTime3Val}}</div>
          <van-popup v-model="showPicker6" round position="bottom">
            <van-datetime-picker
              v-model="startTime3"
              type="time"
              @cancel="showPicker6 = false"
              @confirm="onConfirm6"
            />
          </van-popup>
        </div>
        <div class="addSiteType_box">
          <div class="electricityBox_l">End Time</div>
          <div class="electricity_timeBox" @click="showPicker7 = true">{{endTime3Val}}</div>
          <van-popup v-model="showPicker7" round position="bottom">
            <van-datetime-picker
              v-model="endTime3"
              type="time"
              @cancel="showPicker7 = false"
              @confirm="onConfirm7"
            />
          </van-popup>
        </div>
        <div class="addSiteType_box">
          <div class="electricityBox_l">Tariff</div>
          <div class="electricity_timeBox">
            <van-field v-model="shoulderPrice" clearable type="number" />
          </div>
        </div>
      </div>
      <div class="btnBox">
        <van-button round block color="linear-gradient(#F9C25F, #F5861A)" native-type="submit">Save</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data(){
    return {
      currencyCode:'AUD',
      columns:["AUD","RMB","EUR","GBP","INR","NZD","PKR","USD","ZAR","BRL","PLN"],
      showPicker:false,
      onGridPrices:'',
      onPeakPrice:'',
      offPeakPrice:'',
      shoulderPrice:'',
      startTime1Val:'00:00',
      showPicker2:false,
      startTime1:this.timeFormat(new Date()),
      endTime1Val:'00:00',
      showPicker3:false,
      endTime1:this.timeFormat(new Date()),
      startTime2Val:'00:00',
      showPicker4:false,
      startTime2:this.timeFormat(new Date()),
      endTime2Val:'00:00',
      showPicker5:false,
      endTime2:this.timeFormat(new Date()),
      startTime3Val:'00:00',
      showPicker6:false,
      startTime3:this.timeFormat(new Date()),
      endTime3Val:'00:00',
      showPicker7:false,
      endTime3:this.timeFormat(new Date())
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/sitedetail'});
    },
    onConfirm(value){
      this.currencyCode = value;
      this.showPicker = false;
    },
    onConfirm2(value){
      this.startTime1Val = value;
      this.showPicker2 = false;
    },
    onConfirm3(value){
      this.endTime1Val = value;
      this.showPicker3 = false;
    },
    onConfirm4(value){
      this.startTime2Val = value;
      this.showPicker4 = false;
    },
    onConfirm5(value){
      this.endTime2Val = value;
      this.showPicker5 = false;
    },
    onConfirm6(value){
      this.startTime3Val = value;
      this.showPicker6 = false;
    },
    onConfirm7(value){
      this.endTime3Val = value;
      this.showPicker7 = false;
    },
    timeFormat(time) { // 时间格式化
      let hour = time.getHours()>9?time.getHours():'0'+time.getHours();
      let minute = time.getMinutes()>9?time.getMinutes():'0'+time.getMinutes();
      return `${hour}:${minute}`
    },
    getPrice(){}
  }
}
</script>

<style scoped lang="less">
.electricityBox{
  width: 100%;
  padding: 0 10px 10px 10px;
  background: #ffffff;
  box-sizing: border-box;
}
.addSiteType_box{
  width: 100%;
  height: 45px;
  text-align: left;
  border-bottom: 1px solid #F5F6F8;
}
.addSiteType_box_l{
  float: left;
  width: 100px;
  height: 45px;
  line-height: 45px;
}
.addSiteType_box_r{
  float: left;
}
.addSite_siteType{
  width:129px;
  height: 45px;
  line-height: 45px;
}
.electricityBox_l{
  float: left;
  width: 127px;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
}
.electricity_timeBox{
  float: left;
  width: 150px;
  height: 44px;
  line-height: 44px;
}
</style>
